import Icon from '@/components/Icon';
import Input from '@/components/Input';
import NavBar from '@/components/NavBar';
import { useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';

// 导入下载的socket.io-client
import io, { Socket } from 'socket.io-client';
import { baseURL } from '@/utils/request';
import { getTokenInfo } from '@/utils/storage';
import { Toast } from 'antd-mobile';

// 定义List的泛型
type ChatMsgType = {
  type: string;
  msg: string;
  timestamp: number;
};

export default function ProfileChat() {
  const [msgList, setMsgList] = useState<ChatMsgType[]>([]);
  // 发、接消息 - 1. 创建ref存储client
  const MsgRef = useRef<Socket | null>();
  // 创建socket.io-client的实例
  useEffect(() => {
    // 创建实例
    MsgRef.current = io(baseURL, {
      query: {
        token: getTokenInfo().token,
      },
      transports: ['websocket'],
    });
    // 监听连接成功，主动发一条消息给客户端
    MsgRef.current.on('connect', () => {
      // 主动发一条消息
      setMsgList([{ type: 'robot', msg: '你好，早', timestamp: Date.now() }]);
    });

    // 发、接消息 - 3. 监听接收服务端的信息
    MsgRef.current.on('message', (data) => {
      // data是接收发过来的数据
      // 发、接消息 - 4. 更新msgList
      // 这里要做一个回调，不然会被覆盖掉之前的数据
      setMsgList((msgList) => [...msgList, { ...data, type: 'robot' }]);
    });
    return () => {
      // 卸载后关闭连接
      MsgRef.current?.close();
    };
  }, []);

  // 改为受控组件
  const [msg, setMsg] = useState('');
  // 点击“发送按钮”
  const handleSendMsg = () => {
    // 判断输入的内容不能为空
    if (!msg) return Toast.show('内容不能为空');
    // 发、接消息 - 2. 向服务器发消息
    const userMsg = { msg, timestamp: Date.now() };
    MsgRef.current?.emit('message', userMsg);
    setMsgList([...msgList, { ...userMsg, type: 'user' }]);
    // 发送之后清空输入框内容
    setMsg('');
  };

  // 给input框添加回车事件
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSendMsg();
    }
  };

  // 监听 msgList 的数据变化来滚动屏幕
  useEffect(() => {
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth',
    });
  }, [msgList]);

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar fixed>小智同学</NavBar>

      {/* 聊天记录列表 - 开始 */}
      <div className="chat-list">
        {msgList.map((item) => {
          return item.type === 'robot' ? (
            <div className="chat-item robot" key={item.timestamp}>
              <Icon type="iconbtn_xiaozhitongxue" />
              <div className="message">{item.msg}</div>
            </div>
          ) : (
            <div className="chat-item user" key={item.timestamp}>
              <img
                src={'http://toutiao.itheima.net/images/user_head.jpg'}
                alt=""
              />
              <div className="message">{item.msg}</div>
            </div>
          );
        })}
      </div>
      {/* 聊天记录列表 - 结束 */}

      {/* 底部消息输入框 */}
      <div className="footer">
        <div className="input-footer">
          <Icon type="iconbianji" />
          <Input
            value={msg}
            onChange={(e) => setMsg(e.target.value)}
            autoFocus
            className="no-border"
            placeholder="请描述您的问题"
            onKeyDown={(e) => handleKeyDown(e)}
          />
          <span className="send" onClick={handleSendMsg}>
            发送
          </span>
        </div>
      </div>
    </div>
  );
}
